import React, { useState, useMemo } from 'react';
import { Button, Card, Space } from 'antd';

const ExpensiveComponent = ({ number, count }:{ number: number; count: number; }) => {
  // 每次渲染都会重新计算
  console.log('Computing...');
  // 假如result需要大量计算，暂时用number * count简单模拟
  const result = useMemo(() => {
    // 只在 number 变化时重新计算
    console.log('对于result, 只在 number 变化时重新计算...');
    return number * count;
  }, [number]);

  return (
    <div>result: {result}</div>
  );
};

const App = () => {
  const [number, setNumber] = useState(100000);  // 初始值改小一点
  const [count, setCount] = useState(0);

  return (
    <Card title="使用 useMemo">
      <Space direction="vertical">
        <Button onClick={() => setNumber(n => n + 10000)}>  {/* 增量也改小一点 */}
          number ({number})
        </Button>
        <Button onClick={() => setCount(c => c + 1)}>
          count ({count})
        </Button>
        <ExpensiveComponent number={number} count={count} />
      </Space>
    </Card>
  );
};

export default App;
